<template>
  <v-md-preview ref="mdPreview" class="mdPreview"  :text="markdownText"></v-md-preview>
</template>

<script>

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// 复制代码快捷键
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

// katex 公式解析
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/npm';
import 'katex/dist/katex.min.css';
VMdPreview.use(createCopyCodePlugin());
VMdPreview.use(createKatexPlugin());
// highlightjs 代码高亮
import hljs from 'highlight.js';
VMdPreview.use(githubTheme, {Hljs: hljs});
// 引入中文语言包
import zhCN from '@kangc/v-md-editor/lib/lang/zh-CN';
VMdPreview.lang.use('zh-CN', zhCN);

export default {
  name: "MdPreview",
  components: {
    VMdPreview
  },
  props: {
    markdownText: {
      required: true,
      type: String,
      default: ''
    },
  },
  data(){
    return {
      textContent: "",
      textIndex: 0,
      isReader: false
    }
  },
  computed:{
    // markdownTextRender() {
    //   return this.katexRender(this.markdownText);
    // }
  },
  mounted() {

  },
  methods:{
    // @TODO 逐字输出
    katexRender(text){
      // 数学公式匹配 "\\[\n\\lim_{{x \\to 0}} (1 + x)^{\\frac{1}{x}} = e\n\\]"
      const regex = /\\\[([\w\s\S])*?\\\]/g;
      text = text.replace(regex, (match) => {
        try {
          // match = match.replace("\n\\[ ", () => '\n$$')
          // match = match.replace(" \\]\n", () => '$$\n')
          match = match.replace("\\[\n", () => '$$\n')
          match = match.replace("\n\\]", () => '\n$$')
          match = match.replace("\\[ ", () => '$')
          match = match.replace(" \\]", () => '$')
          match = match.replace("\\[", () => '$')
          match = match.replace("\\]", () => '$')
          return match
        } catch (e) {
          return match;
        }
      });

      const regex2 = /\\\(([\w\s\S])*?\\\)/g;
      text = text.replace(regex2, (match) => {
        try {
          match = match.replace("\\( ", () => '$')
          match = match.replace(" \\)", () => '$')
          match = match.replace("\\(", () => '$')
          match = match.replace("\\)", () => '$')
          return match
        } catch (e) {
          return match;
        }
      });

      return text
    }
  }
};
</script>

<style lang="scss" scoped>

.mdPreview{
  ::v-deep .github-markdown-body {
    padding: 10px;
    user-select: text !important; /* 禁止用户选择文本 */

    h1, h2, h3, h4, h5, h6 {
      margin-top: 10px;
      margin-bottom: 10px;
      font-weight: 600;
      line-height: 1.25;
      font-size: 16px;
    }

    p {
      margin: 0px !important;
    }

    blockquote {
      margin: 16px;
    }

    ol {
      list-style-type: decimal !important;
      margin: 5px;
      padding: 0px 5px;

      li {
        /*
          disc：实心圆点（默认）
          circle：空心圆点
          square：实心方块
          decimal：数字（1, 2, 3, …）
         */
        list-style: decimal;
        font-size: 14px;
      }
    }

    ul {
      list-style-type: disc !important;
      margin: 5px !important;
      padding: 5px !important;

      li {
        list-style: disc;
        font-size: 14px;
      }
    }

    ol ul, ul ul {
      list-style-type: circle !important;
      margin: 5px !important;
      padding: 5px !important;
    }

    ol ol ul, ol ul ul, ul ol ul, ul ul ul {
      list-style-type: square !important;
      margin: 5px !important;
      padding: 5px !important;
    }
  }
}

</style>
